{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "btn-animated-gradient",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/button/btn-animated-gradient.tsx",
      "content": "'use client';\r\nimport { useRef, useState } from 'react';\r\n\r\nconst ButtonAnimatedGradient = () => {\r\n  const divRef = useRef<HTMLButtonElement>(null);\r\n  const [isFocused, setIsFocused] = useState(false);\r\n  const [position, setPosition] = useState({ x: 0, y: 0 });\r\n  const [opacity, setOpacity] = useState(0);\r\n\r\n  const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (!divRef.current || isFocused) return;\r\n\r\n    const div = divRef.current;\r\n    const rect = div.getBoundingClientRect();\r\n\r\n    setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });\r\n  };\r\n\r\n  const handleFocus = () => {\r\n    setIsFocused(true);\r\n    setOpacity(1);\r\n  };\r\n\r\n  const handleBlur = () => {\r\n    setIsFocused(false);\r\n    setOpacity(0);\r\n  };\r\n\r\n  const handleMouseEnter = () => {\r\n    setOpacity(1);\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    setOpacity(0);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <button\r\n        ref={divRef}\r\n        onMouseMove={handleMouseMove}\r\n        onFocus={handleFocus}\r\n        onBlur={handleBlur}\r\n        onMouseEnter={handleMouseEnter}\r\n        onMouseLeave={handleMouseLeave}\r\n        className='relative inline-flex w-fit mx-auto h-12 items-center justify-center overflow-hidden rounded-md border-2 dark:border-[#656fe2] border-[#c0c6fc] bg-linear-to-r dark:from-[#070e41] dark:to-[#141d57] from-[#9ba3fdfd] to-[#3d5af1] px-6 font-medium text-white  shadow-2xl transition-colors focus:outline-hidden focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-gray-50'\r\n      >\r\n        <div\r\n          className='pointer-events-none absolute -inset-px opacity-0 transition duration-300'\r\n          style={{\r\n            opacity,\r\n            background: `radial-gradient(100px circle at ${position.x}px ${position.y}px, #656fe288, #00000026)`,\r\n          }}\r\n        />\r\n        <span className='relative z-20'>Click Me</span>\r\n      </button>\r\n    </>\r\n  );\r\n};\r\n\r\nexport default ButtonAnimatedGradient;",
      "type": "registry:component"
    }
  ]
}